<script lang="ts" setup>
import { ads_ids, DOMAINS, isShowTopUp } from "@/config/ads_ids";
import { classNameHomeItemList } from "@/config/const_var";
import { articleDetailRoute, articleDetailRRoute } from "@/router";
import { useRefModel } from "@/utils/hooks";
defineOptions({
  name: "HomeItemList",
});
let props = defineProps({
  isShowReadMore: {
    type: [Boolean],
    default: false,
  },
  overflowY: {
    type: [String],
    default: "scroll",
  },
  scrollSnapType: {
    type: [String],
    default: "y mandatory",
  },
  paddingTop: {
    type: [String],
    default: "0px",
  },
  viewData: {
    type: [Array],
    default: () => [],
  },
});
let emit = defineEmits([
  "update:isShowReadMore",
  "update:overflowY",
  "update:paddingTop",
  "update:scrollSnapType",
  "update:viewData",
]);
let isShowReadMore = useRefModel(props, "isShowReadMore", emit);
let overflowY = useRefModel(props, "overflowY", emit);
let paddingTop = useRefModel(props, "paddingTop", emit);
let scrollSnapType = useRefModel(props, "scrollSnapType", emit);
let viewData = useRefModel(props, "viewData", emit);

let itemListRef = ref<any>(null);
let observerListItem = new IntersectionObserver((entries) => {
  entries.forEach(async (entry: any) => {
    let target = entry.target;
    if (entry.isIntersecting === true) {
      let index = target.dataset.index * 1;
      if (index >= 2) {
        isShowTopUp.value = true;
      } else {
        isShowTopUp.value = false;
      }
    }
    if (entry.isIntersecting === false) {
    }
  });
});
onMounted(() => {
  [].forEach.call(itemListRef.value.children, (element) => {
    observerListItem.observe(element);
  });
});
onBeforeRouteLeave(() => {
  [].forEach.call(itemListRef.value.children, (element) => {
    observerListItem.unobserve(element);
  });
});

let hostname = location.hostname;
function getRemainder(number: number) {
  return number % 7;
}
let router = useRouter();
let currentPath = router.currentRoute.value.path;
function get_list_index_ads_id_320_100(index: number) {
  if (DOMAINS.includes(hostname)) {
    let ads_article_type = "list_index";
    if (
      currentPath === articleDetailRRoute.path ||
      currentPath === articleDetailRoute.path
    ) {
      ads_article_type = "news_detail";
    }
    return ads_ids[hostname][ads_article_type]["ads_ids_320_100"][
      getRemainder(index)
    ];
  } else {
    return ads_ids["default_list_index_id"];
  }
}
</script>
<template>
  <div
    :class="classNameHomeItemList"
    :style="{
      overflowY: overflowY,
      scrollSnapType: scrollSnapType,
    }"
    ref="itemListRef"
  >
    <HomeListItem
      v-for="(item, index) in viewData"
      :key="index"
      :data-index="index"
      :is-show-read-more="isShowReadMore"
      :content="item.content"
      :title="item.title"
      :cover-img="item.coverImg"
      :item="item"
      :style="{
        paddingTop: paddingTop,
      }"
      :is-show-advert="true"
      :ads_type="1"
      :ads_id_320_100="get_list_index_ads_id_320_100(index)"
    />
  </div>
</template>
<style lang="scss" scoped>
.#{$scss-classNameHomeItemList} {
  height: 100vh;
  /* scroll-snap-type: y mandatory; */
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* overflow-y: scroll; */
  scroll-padding-top: 12px;
  :deep(.#{$scss-classNameHomeListItem}) {
    height: 80vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}
</style>
